<template>
	<view class="container">
		<!-- 1. 顶部导航栏 -->
		<view class="header">
			<view class="header-left">
				<image class="logo" src="/static/学习平台logo.png" mode="aspectFill"></image>
				<text class="plateform-name">知享校园</text>
			</view>
			<view class="header-right">
				<!-- 搜索框 -->
				<view class="search-box" @click="goToSearch">
					<uni-icons type="search" size="16" color="#999"></uni-icons>
					<text class="search-text">搜索资源</text>
				</view>
				<!-- 通知栏 -->
				<view class="notification" @click="goToNotifications">
					<uni-icons type="bell" size="20" color="#666"></uni-icons>
					<view v-if="unreadCount > 0" class="notification-badge">{{ unreadCount }}</view>
				</view>
				<!-- 登录/用户信息-->
				<view v-if="!isLogin" class="auth-button">
					<text class="login-btn" @click="goToLogin">登录</text>
				</view>
				<view v-else class="user-info" @click="goToProfile">
					<image class="avatar" :src="userInfo.avatar || '/static/avatar.png'" mode="aspectFill"></image>
					<text class="username">{{ userInfo.nickname || userInfo.username }}</text>
				</view>
			</view>
		</view>

		<!-- 2. 轮播图 -->
		<view class="banner-section">
			<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" duration="500">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<view class="banner-item" @click="handleBannerClick(banner)">
						<image class="banner-image" :src="banner.image" mode="aspectFill"></image>
						<view class="banner-content">
							<text class="banner-title">{{banner.title}}</text>
							<text class="banner-desc">{{banner.desc}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 3.资源分类快捷入口 -->
		<view class="category-section">
			<view class="section-title">
				<text class="title-text">资源分类</text>
				<text class="more-text" @click="goToAllCategories">全部 ></text>
			</view>
			<scroll-view class="category-scroll" scroll-x="true">
				<view class="category-list">
					<view v-for="category in categoryList" :key="category.id" class="category-item"
						@click="goToCategory(category)">
						<view class="category-icon">
							<uni-icons :type="category.icon" size="24" color="#1890ff"></uni-icons>
						</view>
						<text class="category-name">{{ category.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 4.热门资源展示区 -->
		<view class="hot-resource-section">
			<view class="section-title">
				<text class="title-text">热门资源</text>
				<view class="tab-switch">
					<text :class="['tab-item',activeTab === 'hot' ? 'active' : '']"
						@click="switchTab('hot')">本周推荐</text>
					<text :class="['tab-item',activeTab === 'new' ? 'active' : '']"
						@click="switchTab('new')">最新上传</text>
				</view>
			</view>
			<view class="resource-grid">
				<view v-for="resource in displayedResources" :key="resource.id" class="resource-card"
					@click="goToResourceDetail(resource)">
					<view class="resource-header">
						<text class="resource-title">{{ resource.title }}</text>
						<view class="resource-points">
							<text class="points-text">{{ resource.point }}积分</text>
						</view>
					</view>
					<view class="resource-meta">
						<text class="resource-uploader">{{ resource.uploader }}</text>
						<text class="resource-downloads">下载：{{ resource.downloadCount }}</text>
					</view>
					<text class="resource-desc">{{ resource.description }}</text>
					<view class="resource-tags">
						<text v-for="tag in resource.tags" :key="tag" class="tag">{{ tag }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 5.最新资源列表 -->
		<view class="latest-resources-section">
			<view class="section-title">
				<text class="title-text">最新资源</text>
				<text class="more-text" @click="goToResourceList">更多</text>
			</view>
			<view class="latest-list">
				<view v-for="resource in latestResources" :key="resource.id" class="latest-item"
					@click="goToResourceDetail(resource)">
					<view class="latest-item-left">
						<text class="latest-title">{{ resource.title }}</text>
						<view class="latest-meta">
							<text class="latest-uploader">{{ resource.uploader }}</text>
							<text class="latest-time">{{ resource.uploadTime }}</text>
						</view>
					</view>
					<view class="latest-item-right">
						<text class="latest-points">{{ resource.point}}积分</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 6.积分引导模块 -->
		<view class="points-guide-section">
			<view class="guide-card">
				<view class="guide-header">
					<text class="guide-title">赚取积分，下载更多资源</text>
					<text class="guide-subtitle">上传优质资源 -> 审核通过 ->获得积分</text>
				</view>
				<view class="guide-steps">
					<view class="step-item">
						<view class="step-icon">1</view>
						<text class="step-text">上传资源</text>
					</view>
					<view class="step-arrow">-></view>
					<view class="step-item">
						<view class="step-icon">2</view>
						<text class="step-text">等待审核</text>
					</view>
					<view class="step-arrow">-></view>
					<view class="step-item">
						<view class="step-icon">3</view>
						<text class="step-text">获得积分</text>
					</view>
				</view>
				<button class="upload-btn" @click="goToUpload">立即上传资源</button>
			</view>
		</view>
		<!-- 7.底部功能区 -->
		<view class="footer-section">
			<view class="footer-links">
				<view class="link-group">
					<text class="link-title">平台介绍</text>
					<text class="link-item" @click="goToAbout">关于我们</text>
					<text class="link-item" @click="goToGuide">使用指南</text>
					<text class="link-item" @click="goToFAQ">常见问题</text>
				</view>
				<view class="link-group">
					<text class="link-title">联系我们</text>
					<text class="link-item">客服QQ: 1396546003</text>
					<text class="link-item">邮箱：1396546003@qq.com</text>
					<text class="link-item">电话：15280042230</text>
				</view>
			</view>
			<!-- 响应式设计提示 -->
			<view class="mobile-promote">
				<text class="promote-text">支持多端使用，扫码体验手机端</text>
				<view class="qrcode-section">
					<image class="qrcode" src="" mode="aspectFit"></image>
				</view>
			</view>
			<view class="footer-bottom">
				<text class="copyright"> 2025 知享校园 版权所有</text>
				<text class="record">闽ICP备12345678号</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				unreadCount: 3,
				userInfo: {
					avatar: '',
					nickname: '',
					username: ''
				},
				activeTab: 'hot',
				bannerList: [
					{
					image: '/static/banner1.jpg',
					title: '上传资源赚积分',
					desc: '分享知识，积累财富',
					link: '/pages/tabber/Upload/Upload'
				},
				
				]
			}
		},
		methods: {}
	}
</script>

<style>

</style>